<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import type { Image } from '@/types/consult.d.ts'
	import { uploadImgApi } from '@/apis/consult'
	import { useConsultStore } from '@/stores/consult.ts'
	//病情数据(提交)
	const illnessInfo = ref({
		illnessDesc: '',
		illnessTime: 1,
		consultFlag: 0,
		pictures: [] as Image[],
	})
	//患病时长
	const illTime = [
		{ value: 1, text: '一周内' },
		{ value: 2, text: '一月内' },
		{ value: 3, text: '半年内' },
		{ value: 4, text: '半年以上' },
	]
	//切换患病时长
	const illTimeChange = (value: number) => {
		illnessInfo.value.illnessTime = value
	}

	//是否就诊
	const consultArr = [
		{ value: 0, text: '未就诊' },
		{ value: 1, text: '就诊过' },
	]
	//切换就诊情况
	const consultFlagChange = (value: number) => {
		illnessInfo.value.consultFlag = value
	}

	// 选择图片
	const selectImg = async (e) => {
		//
		// 图片的临时路径
		const res = await uploadImgApi(e.tempFilePaths[0])
		// console.log(res)
		illnessInfo.value.pictures.push(res)
		console.log(e)
	}

	const props = defineProps<{ type: string; illnessType: string; depId: string }>()
	const store = useConsultStore()
	//点击下一步提交
	const Nextstep = () => {
		// console.log(illnessInfo.value)
		store.illnessInfo = illnessInfo.value
		// 保存url里面的参数
		store.type = props.type
		store.illnessType = props.illnessType
		store.depId = props.depId
		//跳转页面(添加患者界面)
		uni.navigateTo({
			url: '/subpkg_archive/list/list?type=consult',
		})
	}

	//还原数据
	if (store.illnessInfo.illnessDesc) {
		//提示用户还原上一次的内容
		uni.showModal({
			title: '提示',
			content: '是否还原上一次的内容？',
			showCancel: true,
			success: (e) => {
				if (e.confirm === true) {
					// console.log('你点击了确认~')
					illnessInfo.value = store.illnessInfo
				}
			},
		})
	}
</script>

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						v-model="illnessInfo.illnessDesc"
						type="textarea"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<text
						v-for="(item, index) in illTime"
						:key="index"
						class="tag"
						@tap="illTimeChange(item.value)"
						:class="{ active: item.value === illnessInfo.illnessTime }"
						>{{ item.text }}</text
					>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						v-for="(item, index) in consultArr"
						:key="index"
						:class="{ active: item.value === illnessInfo.consultFlag }"
						class="tag"
						@tap="consultFlagChange(item.value)"
						>{{ item.text }}</text
					>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
					@select="selectImg"
					v-model="illnessInfo.pictures"
				/>
			</view>
		</view>
		<!-- 下一步操作 -->
		<!-- 如果没有输入内容的话 就不显示下一步 -->
		<view v-if="illnessInfo.illnessDesc.trim().length > 0" class="next-step">
			<button @tap="Nextstep" class="uni-button">下一步</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
